<template>
	<view v-if="c2bRulesPopupShow" class="c2b_rules_box" :class="!showBtnArea?'rules_box_no_btn':''" @click.stop="boxClick">
		<view class="c2b_rules_inner">
			<view class="rules_close" @click.stop="handleCloseC2bRules">
				<image src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/X.png"></image>
			</view>
			<view class="rule_title">{{rulesTitle}}</view>
			<image class="dividers" src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/Dividers3x.png"></image>
			<scroll-view class="rule_textbox" :class="!showBtnArea?'rule_textbox_no_btn':''" scroll-y="true">
				<block v-for="(item, index) in rulesLists" :key="index">
					<image style="width:100%;" mode="widthFix" :src="item"></image>
				</block>
			</scroll-view>
			<block v-if="showBtnArea">
				<view class="sel_rule_box" @click.stop="handleChangeCheckStatus">
					<view class="check_img">
						<image v-if="!userCheckStatus" src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/uncheck.png"></image>
						<image v-else src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/check.png"></image>
					</view>
					<view class="check_text">
						我已知悉并同意<text class="bold_text">《{{rulesTitle}}》</text>
					</view>
				</view>
				<view class="btn_box">
					<view class="btn_style" @click.stop="handleNotC2Bpage">无需定制</view>
					<view class="btn_style" :class="userCheckStatus?'sel_active':'not_sel'" @click.stop="handleToC2Bpage">前往定制</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api';
	export default {
		data() {
			return {
				showBtnArea: false,
				c2bRulesPopupShow: false,
				userCheckStatus: false,
				rulesLists:[],
				rulesTitle: ""
			}
		},
		async mounted(){
			await this.getRulesUtoolsData();
		},
		methods: {
			/**
			 * 
			 * @param {Object} showBtnArea  底部按钮区域是否展示
			 */
			show(showBtnArea){
				this.userCheckStatus = false;
				this.c2bRulesPopupShow = true;
				this.showBtnArea = showBtnArea ? true : false;
			},
			//  获取utools数据
			async getRulesUtoolsData(option) {
				const that = this;
			  let json = await api.getUtoolsJson({
					type: 'c2bRules'
				});
				this.rulesTitle = "麦卡伦定制刻字服务细则";
				that.rulesLists = [];
			  if (json && json.success && json.data) {
			    const _utoolsData = JSON.parse(json.data);
					if(_utoolsData.children && _utoolsData.children.length){
						_utoolsData.children.forEach(item=>{
							if(item.type === 'text' && item.text){
								that.rulesTitle = item.text;
							}
							if(item.type === 'img' && item.src){
								that.rulesLists.push(item.src);
							}
						})
					}
			  }
			},
			//	无需定制
			handleNotC2Bpage(){
				this.c2bRulesPopupShow = false;
				this.showBtnArea = false;
				this.$emit('onC2BrulesEvent', {type: 'C2B_NO'})
			},
			//	跳转c2b页面
			handleToC2Bpage(){
				if(this.userCheckStatus){
					this.c2bRulesPopupShow = false;
					this.showBtnArea = false;
					this.$emit('onC2BrulesEvent', {type: 'C2B_YES'})
				}else{
					//	提示用户勾选 麦卡伦定制刻字服务细则
					this.$emit('onC2BrulesEvent', {type: 'C2B_TIPS'})
				}
			},
			//	关闭规则弹窗
			handleCloseC2bRules(){
				this.c2bRulesPopupShow = false;
				this.showBtnArea = false;
				this.$emit('onC2BrulesEvent', {type: 'C2B_CLOSE'})
			},
			boxClick(){},
			handleChangeCheckStatus(){
				this.userCheckStatus = !this.userCheckStatus;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rules_box_no_btn{
		padding: 264rpx 48rpx !important;
	}
	.c2b_rules_box{
		width: 750rpx;
		height: 100vh;
		padding: 254rpx 48rpx;
		position:fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999999;
		.c2b_rules_inner{
			width: 100%;
			height: 100%;
			background-color: #fff;
			padding: 128rpx 64rpx 96rpx 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
			.rules_close{
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				width: 64rpx;
				height: 64rpx;
				image{
					width: 40%;
					height: 40%;
					margin: 30%;
				}
			}
			.rule_title{
				font-family:NotoSansSC-Medium;
				font-weight: 500;
				font-size: 36rpx;
				line-height: 52rpx;
				text-align: center;
			}
			.dividers{
				width: 182rpx;
				height: 20rpx;
				margin-top: 40rpx;
			}
			.rule_textbox{
				width: 100%;
				height: 464rpx;
				margin: 80rpx 0;
			}
			.rule_textbox_no_btn{
				height: 680rpx !important;
				margin: 80rpx 0 0 0 !important;
			}
			.sel_rule_box{
				width: 100%;
				// height: 44rpx;
				height: 76rpx;
				padding-bottom: 32rpx;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				justify-content: flex-end;
				.check_text{
					font-size: 24rpx;
					line-height: 40rpx;
					color: #757575;
					font-family: FrankNew-Regular,NotoSansSC-Regular;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-weight: 400;
					margin-left: 16rpx;
					.bold_text{
						font-family: FrankNew-Medium,NotoSansSC-Medium !important;
						color: #1a1a1a !important;
						font-weight: 500 !important;
					}
				}
				.check_img{
					width: 24rpx;
					height:24rpx;
					font-size: 0;
					// margin-left: 8rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.btn_box{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.btn_style{
					width: 255rpx;
					height: 80rpx;
					line-height: 72rpx;
					border: 6rpx solid #000;
					border-radius: 48rpx 16rpx 48rpx 48rpx;
					text-align: center;
					color: #000;
					font-family: FrankNew-Medium,NotoSansSC-Medium;
					font-weight: 500;
					font-size: 28rpx;
				}
				.not_sel{
					border: 6rpx solid #c6c6c6 !important;
					background-color: #c6c6c6 !important;
					color: #757575 !important;
				}
				.sel_active{
					border: 6rpx solid #000 !important;
					background-color: #000 !important;
					color: #fff !important;
				}
			}
			
		}
	}
</style>
